<template>	
	<div @click="go">
		<div style="position: absolute;top: 40%;left: 15%;transform: rotate(-90deg);text-align: center;">
			<div><svg id = 'barcode'></svg></div>
		 <div style="font-size: 2.2rem;">{{num|NumFormat}}</div>
		</div>
		 
		 
	<div class="shadowDiv" v-if='!orderId'></div>
	<modal v-if='comment'>
		<div  class="neirong">
	    <div class="prompt">提示</div>
	    <div class="promptContent">核销成功，是否评一评</div>
	    <div class="btnDiv">
	      <span class="cancelBtn" @click="quxiao">取消</span>
	      <span class="confirmBtn" @click="goComment">确定</span>
	    </div>
	   </div>
	</modal>

		 <!-- 奖励显示弹框 -->
		 	<reward-modal v-if="shareInfo" @close="hiddenShareInfo" :stateUnder="stateUnder" :moneyUnder1="moneyUnder1" :moneyUnder2="moneyUnder2" :money="usrAmt" :nums="nums" type="use" returnHistory='true'></reward-modal>
  
	</div>
</template>

<script>
	var JsBarcode = require('jsbarcode');
	import RewardModal from 'src/componentes/global/reward/index.vue'
	import {
  socket
} from '../../utils/socket'
import {
  mapState
} from 'vuex'
	export default{
		data(){
			return{
				num:'',
				socket: () => {},
      			tt: () => {}, //定时任务，断开webSocket重连
      			socketContent: '',
      			usrAmt:0,
      			orderId:'',
      			comment:false,
      			shareInfo:false,
      			Codetypes:'',
      			mchtIds:'',
      			couponNos:'',
      			Codetypes: '',
      			nums:1,
				moneyUnder1:'',
				moneyUnder2:'',
				stateUnder:false,
      			
			}
		},
		 components: {
    RewardModal
  },
		created:function(){
			this.$emit('header-info', {
			title: '查看条形码',
			isBack: true,
			isMessage: false
		})
			this.num=this.$route.query.num
			this.Codetypes=this.$route.query.Codetypes
			
		},
		  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      userUrl: state => state.user.userUrl,
    })
  },
		mounted:function(){
			this.$nextTick(function(){
				let me=this
				if(me.$route.query.num.split(',').length<15){
					JsBarcode("#barcode",me.$route.query.num,{width:2,height:55,  displayValue:false});
				}else{
					JsBarcode("#barcode", me.$route.query.num,{width:1,height:50,  displayValue:false});
				}
				  this.socket = socket(process.env.SOCKET_API + "/web/socketServer/", this.userInfo.usrId);
      //定时查询webSocket是否断开，断开则重连。
      this.tt = setInterval(() => {
        //判断webSocket是否存在或不在通信状态则进行重新连接并重新建立监听事件
        if (!me.socket || me.socket.readyState !== 1) {
          me.socket.removeEventListener("message", this.messageListen, false); //删除监听事件
          me.socket = socket(process.env.SOCKET_API + "/web/socketServer/", me.userInfo.usrId);
          me.socket.addEventListener("message", me.messageListen, false); //监听message事件
        }
      }, 2500);
      me.socket.addEventListener("message", me.messageListen, false); //监听message事件

				
			})
			
		},
		  beforeDestroy() {
    clearInterval(this.tt); //移除重新连接webSocket定时器
    this.socket.removeEventListener("message", this.messageListen, false); //删除监听事件
    this.socket.close(); //关闭webSocket
  },
		filters:{
			NumFormat :function(value){
				 var intPart = value//获取整数部分
            var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{4})+$)/g, '$1 '); //将整数部分逢三一断

            var value2Array = value.split(".");

         
                return intPartFormat 
            
			}
		},
		methods:{
			go(){
//				 window.history.go(-1)
			},
		messageListen(evt) {
      this.socketContent = JSON.parse(evt.data);
      if (this.socketContent) {
        var me = this
        me.usrAmt = me.socketContent[0].usrAmt
        me.orderId = me.socketContent[0].orderId
        me.couponNos = me.socketContent[0].couNo
        me.mchtIds = me.socketContent[0].mchtId
		if (me.socketContent[0].usrAmt==0&&me.socketContent[0].settUsrAmt==0) {
			me.comment = true;
			me.shareInfo = false			
		}else if(me.socketContent[0].usrAmt>0&&me.socketContent[0].settUsrAmt>0){
			me.shareInfo = true
			me.moneyUnder1=me.socketContent[0].usrAmt
			me.moneyUnder2=me.socketContent[0].settUsrAmt
			me.nums=2
			me.stateUnder=true
		}else{
			me.shareInfo = true
			me.stateUnder=false
		}        
      }
    },
        hiddenShareInfo(){
        this.shareInfo = false;
        this.comment = true;
    },
        quxiao() {
      this.$router.replace({
        path: '/cardList',
        query: {
          vueRouterHistory1: 1
        }
      })
    },
    goComment() {
      if (this.Codetypes == 'present' || this.Codetypes == 'ticket') {
        this.$router.replace({
          name: 'doComment',
          query: {
            mchtId: this.mchtIds,
            couponNos: '',
            orderId: this.orderId,
            goCardList:true
          }
        })
      } else {
        this.$router.replace({
          name: 'doComment',
          query: {
            mchtId: this.mchtIds,
            couponNos: this.couponNos,
            orderId: this.orderId,
            goCardList:true
          }
        })
      }

    }
		}
	}
</script>

<style scoped="scoped">
	.shadowDiv {
  /*width: 100vw;
  height: 95vh;
  background: gray;*/
  opacity: .5;
  position: absolute;
  left: 0;
  top: 0;
}

.prompt {
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  font-size: 1.2rem;
}

.promptContent {
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  color: gray;
}

.btnDiv {
  width: 100%;
  border-top: 1px solid gainsboro;
}

.cancelBtn {
  width: 50%;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  color: gray;
  float: left;
  border-right: 1px solid gainsboro;
  box-sizing: border-box;
  display: block;
}

.confirmBtn {
  width: 50%;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  color: cornflowerblue;
  float: right;
  display: block;
}

.neirong {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 9rem;
  top: 30%;
  border: 1px solid gainsboro;
  box-sizing: border-box;
  background: white;
}

</style>